{% extends "template/layout.html" %} {% block content %}
<style>
    .admin_default {
        margin: 20px;
    }

    .layui-body {
        overflow-y: scroll;
    }

    .addBtn {
        float: right;
    }

    .addFrom {
        margin: 20px 20px 20px 5px;
    }

    .formBtn {
        margin-left: 150px;
        margin-top: 50px;
    }

    .idItem {
        display: none;
    }

    .noticeAdd {
        width: 230px;
        height: 30px;
    }

    .addForm {
        margin-top: 30px;
        width: 650px;
        margin: auto;
    }

    #demo1 {
        width: 200px;
        height: 200px;
    }
</style>

<div class="panel admin_default">
    <div class="demoTable">
        <div class="layui-inline  noticeAdd">
        </div>
        <button class="layui-btn  addBtn">返回</button>

    </div>
    <div class="addForm">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">工号：</label>
                <div class="layui-input-block">
                 <input type="text" name="num" required lay-verify="required" autocomplete="off" placeholder="请输入员工工号" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                    <label class="layui-form-label">姓名：</label>
                    <div class="layui-input-block">
                     <input type="text" name="name" required lay-verify="required" autocomplete="off" placeholder="请输入员工姓名" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                        <label class="layui-form-label">联系方式：</label>
                        <div class="layui-input-block">
                         <input type="text" name="phone" required lay-verify="required" autocomplete="off" placeholder="请输入员工联系方式" class="layui-input">
                        </div>
                    </div>
            <div class="layui-form-item">
                <label class="layui-form-label">所属部门：</label>
                <div class="layui-input-block">
                    <select name="department" lay-filter="type" id="addChage" required lay-verify="required">
                        <option value=""></option>
                        {% for item in departmentList %}
                        <option value="{{item.id}}+{{item.name}}">{{item.name}}</option>
                        {% endfor%}
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-form-text notcieImg">
                <label class="layui-form-label">图:</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="test1">上传图片</button>
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" id="demo1">
                            <p id="demoText"></p>
                        </div>
                    </div>
                </div>
            </div>
         

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="add">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>


</div>


{% endblock %} {% block footer %}

<script>
      //返回事件
      $(".addBtn").click(function () {
            window.location.href = "/employees"
        })
    layui.use(['form', 'table', 'laydate', 'upload'], function () {
        var table = layui.table;
        var form = layui.form;
        var upload = layui.upload;
        //方法级渲染
        var imgurl = "";
      

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1',
            url: '/api/upload',
            before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            },
            done: function (res) {
                //如果上传失败
                if (res.status != 200) {
                    return layer.msg('上传失败');
                }
                imgurl = res.imgUrl;
                //上传成功

            },
            error: function () {
                return layer.msg('上传失败');
            }
        });
        //监听提交
        form.on('submit(add)', function (data) {
            var formData = data.field;
            formData.imgurl = imgurl;
            $.post('/employees/add', formData, function (res) {
                if (res.status != 200) {
                    layer.open({
                        title: '警告',
                        content: res.msg,
                        icon: 2,
                        skin: 'layer-ext-moon'
                    });
                    return;
                }
                window.location.href = '/employees';
            })
            return false;
        });

    });
</script>
{% endblock %}